// 封装自己的路由叫AuthRoute，判断用户有没有token来进行页面是否展示
// 就跟那个vue中的导航守卫的效果是一样的
import { Route, Redirect } from "react-router-dom";
import React, { Component } from 'react'
import { hasToken } from "utils/storage";
export default class AuthRoute extends Component {
  // 要通过this.props来接收组件使用这个组件传递过来的值
  render() {
    // 这是是组件传递过来的值，有path和component
    // 把这两个解开，不要component，要用render，因为render里面是函数可以写逻辑
    const { component: Component, ...rest } = this.props
    return (
      // render的参数props是路由的三个重要参数：history，location，match
      // 原本这个参数是Route自动传给component的，但是我用render就要手动传
      <Route
        {...rest}
        render={(props) => {
          // console.log(hasToken());
          if (hasToken()) {
            // 如果有token
            return <Component {...props}></Component>
          } else {
            return <Redirect to={{ pathname: '/login', state: { from: props.location.pathname } }}></Redirect>
          }
        }}></Route>
    )
  }
}
